<template>
	<div class="hot-picture">
		<div class="topBox">
			<div class="topBoxSon1">
				<p>书城管理 — <b>商品二级类型</b></p>
				<el-button @click="refresh()" class=" el-icon-refresh-right" style="background-color: #009688;color: white;"></el-button>
			</div>
		</div>
		<el-table 
		style="width: 90%; margin: 20px 0 20px 5%;" 
		:data="newList" 
		:header-cell-style="{background:'#f2f2f2',color:'#606266'}" 
		border>
			<el-table-column label="一级类型ID" prop="id" width="100">
			</el-table-column>
			<el-table-column label="顺序" prop="prio" width="100">
			</el-table-column>
			<el-table-column label="一级类型名称" prop="name" width="120">
			</el-table-column>
			<el-table-column label="二级类型信息" width="600">
				<template slot-scope="scope">
					<div v-for="item in twoList" v-show="item.pid==scope.row.id" class="twoTypeBox">
						<div style="border-bottom: 1px solid #9f9f9f;display: flex;">
							<div style="width: 88%;">{{item.prio}}&nbsp;&nbsp;&nbsp;{{item.name}}</div>
							<el-link type="warning" style="margin-right: 10px;" v-on:click="goUpdate(item,scope.row)"><i class="el-icon-edit"></i></el-link>
							<el-link type="danger"><i class="el-icon-close"></i></el-link>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="管理" prop="gt">
				<template slot-scope="scope">
					<el-button v-on:click="goAdd(scope.row)" style="background-color: #1e9fff;color: white;border: none;">添加</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog
		  title="类型信息"
		  :visible.sync="dialogVisible"
		  width="50%">
		  <b style="display: flex;">父节点ID:{{twoLists.id}}</b>
		  <br>
		  <b style="display: flex;">父节点名称:{{twoLists.name}}</b>
		  <hr>
		  <el-form >
				<el-form-item label="二级类型名称" label-width="100px">
					<el-input v-model="type.name"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序" label-width="100px">
					<el-input v-model="type.prio"></el-input>
				</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" v-on:click="update()">提交</el-button>
		  </span>
		</el-dialog>	
	</div>
</template>

<script>
	export default {
			data(){
				return{
					//弹出框的状态
					dialogVisible: false,
					type:{},
					typeList:[],
					newList:[],
					twoList:[],
					twoLists:{}
				}
			},
			methods: {
				findHot(){
					this.$get('/api/adm/type/findAll2')
					.then((resp)=>{
							console.log(resp.data)
							this.typeList = resp.data.data;
							this.typeList.forEach((item, i)=>{
							if(item.pid==0){
								this.newList.push(item)
							}
							if(item.pid!=0){
								this.twoList.push(item)
							}
						})
					})
				},
				goUpdate(two,one){
					this.type=two;
					this.twoLists=one;
					this.dialogVisible = true;
				},
				goAdd(one){
					this.type={};
					this.type.id=0;
					this.type.pid=one.id;
					this.twoLists=one;
					this.dialogVisible = true;
					console.log(this.typeList)
				},
				update(){
					this.$postk("/api/adm/type/add",this.type)
					.then((resp)=>{
						this.typeList = resp.data.data;
						this.newList = [];
						this.twoList = [];
						this.typeList.forEach((item, i)=>{
							if(item.pid==0){
								this.newList.push(item)
							}
							if(item.pid!=0){
								this.twoList.push(item)
							}
						})
					})
					this.dialogVisible=false;
				},
				refresh(){
					this.$router.go(0);
				}
			},
			mounted(){
				this.findHot();
			}
	}
</script>

<style scoped>
	.hot-picture{
		width: 100%;
		height: 100%;
	}
	.topBox{
		width: 90%;
		height: 60px;
		margin: 0 auto;
		display: flex;
	}
	.topBoxSon1{
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #aaa6a6;
	}
	.topBoxSon1 p{
		line-height: 60px;
		font-size: 20px;
		color: #aaa6a6;
	}
	.topBoxSon1 p b{
		font-weight: 400;
		line-height: 60px;
		font-size: 20px;
		color: #818181;
	}
	.topBoxSon1 button{
		display: flex;
		background-color: #009688;
		color: white;
		font-size: 20px;
		border: none;
		border-radius: 5px;
		height: 40px;
		width: 55px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		padding-left: 15px;
	}
	.topBoxSon2{
		width: 10%;
		margin: 10px auto;
	}
	.bottomBox{
		width: 100%;
		height: 50px;
		background-color: #D3D3D3;
		/* display: flex; */
	}
	.bottomBox.p{
		display: flex;
		position: absolute;
		bottom: 0;
	}
	.row{
	}
	.col4{
		background-color: #393d49;
	}
</style>